<template>
  <el-form ref="form" :model="form" class="form" label-position="right" :inline=true>
    <el-form-item label="发起人 :" prop="source" class="form-item"label-width="90px" required>
      <el-input v-model="form.source"></el-input>
    </el-form-item>
    <el-form-item label="活动名称 :" prop="title" class="form-item" required>
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="活动时间 :" prop="time" class="form-item" style="margin-left: 40px" required>
      <el-date-picker type="date" placeholder="选择日期" v-model="form.time" value-format="yyyy-MM-dd"></el-date-picker>
    </el-form-item>
    <el-form-item label="活动地点 :" prop="position" class="form-item" required>
      <el-input v-model="form.position"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">发布活动</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'PublicForm',
    data() {
      return {
        form: {
          source:'',
          title:'',
          time:'',
          position:''
        },
        rules: {
          source: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ]
        },
        formName:null
      }
    },
    props:[
      'times'
    ],
    methods: {
      submitForm(formName) {
        let me = this;
        me.formName = formName;
        let url = 'http://127.0.0.1:1111/api/activities/add';
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let form = me.form;
            let formData = {
              source: form.source,
              title: form.title,
              time: form.time,
              position: form.position
            };
            axios({
              method: 'post',
              url: url,
              data:formData,
              withCredentials: true
            }).then(function (response) {
              me.$emit('addActivity',formData);
              me.$message({
                type: 'success',
                message: '发布成功'
              });
              me.resetForm(formName);
            }).catch(function(err){
            });
          } else {
            me.$message({
              type: 'error',
              message: '发布失败'
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>
<style>
  .form {
    font-size: 14px;
    color: #000000;
    letter-spacing: 0;
    line-height: 21px;
  }
  .applycation-form .form-item {
    display: block;
  }
  .applycation-form input, .applycation-form select {
    width: 183px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 2px;
  }
  .applycation-form input, .applycation-form select, .applycation-form input:focus, .applycation-form select:focus {
    border: 1px solid #D9D9D9;
  }
  .applycation-form button, .applycation-form button:hover, .applycation-form button:active{
    background: #F5A623;
  }
  .applycation-form button {
    width: 280px;
    height: 44px;
    border-radius: 2px;
    color: #ffffff;
    margin-top: 0;
  }
  .applycation-form label {
    padding-right: 16px;
  }
</style>
